<template>
  <div class="content">

    <el-form ref="form" :model="form" label-width="120px" :inline="true">

      <el-form-item>
        <el-input v-model="form.username" size="mini" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item>
        <el-input v-model="form.idNo" size="mini" placeholder="请输入身份证号"></el-input>
      </el-form-item>



      <el-date-picker
        v-model="form.startTime"
        align="right"
        size="mini"
        type="datetime"
        :default-value="new Date()"
        style="margin-right: 10px;width: 180px;"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始日期">
      </el-date-picker>

      <el-date-picker
        v-model="form.endTime"
        size="mini"
        style="width: 180px;"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-value="new Date()"
        align="right"
        type="datetime"
        placeholder="结束日期">
      </el-date-picker>

      <el-button type="primary" size="mini" @click="search" class="btn"><i class="fa fa-search"
                                                                           style="margin-right:5px;"></i>查询
      </el-button>
<!--      <el-button type="primary" size="mini" @click="excelExport"><i class="fa fa-arrow-down" style="margin-right:5px;"></i>导出</el-button>-->
    </el-form>

    <!-- <el-divider></el-divider> -->

    <template>
      <el-table
        :data="tableData"
        height="470"
        v-loading="loading"
        size="mini"
        style="width: 100%">

        <el-table-column
          prop="number"
          fixed
          label="订单编号">
        </el-table-column>

        <el-table-column
          prop="username"
          fixed
          label="姓名">
        </el-table-column>

<!--          <el-table-column-->
<!--          prop="gradeName"-->
<!--          width="100"-->
<!--          fixed-->
<!--          label="年级"-->
<!--          v-if="this.form.userType == '学生'">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="className"-->
<!--          width="100"-->
<!--          label="班级"-->
<!--          fixed-->
<!--          v-if="this.form.userType == '学生'">-->
<!--        </el-table-column>-->
        <el-table-column
          prop="idNo"
          label="身份证号"
          fixed>
        </el-table-column>


        <el-table-column
          prop="amount"
          label="退回金额（元）">
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="退款时间">
        </el-table-column>

        <el-table-column
          prop="remark"
          label="备注">
        </el-table-column>

      </el-table>
    </template>
    <el-row>
      <el-col :span="24">
        <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 15, 20,50,100]"
              :page-size="everyPageNum"
              layout="total, sizes,prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
<!--        <div class="grid-content bg-purple-dark" style="font-size:13px;float:right;margin:26px 0 0 10px">合计金额：<span style="color:rgb(20, 136, 154);font-weight:bold">{{sumData}}</span></div>-->
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import Cookies from "js-cookie"
  import editStudent from "@/components/StudentManagement/edit";

  export default {

    data() {
      return {
        sumData: '',
        url: this.$Config.url,
        loading: false,
        total: 1,//总页数
        everyPageNum: 10,//每页多少条
        currentPage: 1,//当前页
        form: {
          username: '',
          idNo: '',
          startTime: '',
          endTime: '',
          userType: '学生'
        },
        tableData: [],
        shopList: [],//档口数据
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      }
    },
    mounted() {
      this.getMonth();
      this.common();
    },
    methods: {
      changeType(){
        let userType=this.form.userType=="学生"?1:2;
        this.common(this.currentPage,this.everyPageNum,userType);
      },
      getMonth(){
        const that = this;
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let dateStr = year + '-' + month + '-01 00:00:00'
        that.form.startTime = dateStr;
      },

      excelExport() {
        const deptId = JSON.parse(localStorage.getItem("userInfo")).deptId;
        // if (JSON.parse(localStorage.getItem("userInfo")).deptId) {
          var divFrame = window.parent.document.getElementById(
            "downLoadListFrame"
          );
          //判断是否存在，如果存在先移除，再重新创建
          if (divFrame != null) {
            window.parent.document.body.removeChild(divFrame);
          }
          var iframe = window.parent.document.createElement("iframe");
          iframe.setAttribute("id", "downLoadListFrame");
          //download_file.id = "downFrame";
          window.parent.document.body.appendChild(iframe);
          divFrame = window.parent.document.getElementById("downLoadListFrame");
          //隐式调用，（注意：window.parent.document 适应对于，farme内部代码，调用frame 外部dom；如果项目未用frame，改写成 document即可）
          divFrame.src = `${this.url}/admin/orderinfo/export?userName=${this.form.userName}&userNo=${this.form.userNo}&startTime=${this.form.startTime}&endTime=${this.form.endTime}&userType=${this.form.userType=='学生'?1:2}`;
          divFrame.style.display = "none";
        // } else {
        //   this.$message({
        //     message: "超级管理员无法下载模板",
        //     type: "warning"
        //   });
        // }
      },


      handleSizeChange(val) {
        //   每页多少条
        this.everyPageNum = val;
        this.common(this.currentPage, val);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.common(val, this.everyPageNum);
      },
      hideEditStatus(status) {
        this.showEdit = false;
        this.common(this.currentPage, this.everyPageNum);
      },
      search() {
        this.common(this.currentPage, this.everyPageNum);
      },
      common(pageNo = 1, pageSize = 10,userType=1) {
        const that = this;
        that.loading = true;
        this.$axios.get(that.url + '/admin/conRefund/list', {
          params: {
            pageNo,
            pageSize,
            username: that.form.username,
            idNo: that.form.idNo,
            startTime: that.form.startTime,
            endTime: that.form.endTime
          },
          headers: {
            "x-baie-admin-token": Cookies.get("token")
          }
        })
          .then(function (res) {
            that.loading = false;
            if (res.data.code == 200) {
              that.tableData = res.data.data.records;
              that.total = res.data.data.total;
              that.sumData = res.data.sum;
            } else {
              that.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }

          })
          .catch(function (error) {
            that.loading = false;
            console.log(error);
          });

      }
    }
  }
</script>

<style scoped lang="scss">
  .el-select, .el-input {
    width: 150px;
  }

  .el-range-editor--mini.el-input__inner {
    margin-top: 7px;
    margin-right: 10px;
    width: 300px;
  }

  .el-pagination {
    float: right;
    margin: 20px 10px;
  }

  .button_list {
    margin-bottom: 10px;
  }

  .content {
    text-align: left;
  }

  .el-divider {
    margin: 10px 0;
  }

  .btn {
    margin-top: 6px;
  }

  .el-form-item {
    margin-bottom: 0;
  }
</style>
